<template>
  <div class="register-page">
    <!-- 用户注册表单 -->
    <div class="register-container">
      <el-form
          ref="registerForm"
          :model="registerForm"
          label-width="80px"
          :rules="rules"
          class="register-form"
      >
        <!-- 用户名输入框 -->
        <el-form-item label="用户名" prop="username">
          <el-input
              v-model="registerForm.username"
              placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <!-- 密码输入框 -->
        <el-form-item label="密码" prop="password">
          <el-input
              type="password"
              v-model="registerForm.password"
              placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <!-- 电话输入框 -->
        <el-form-item label="电话" prop="phone">
          <el-input
              v-model="registerForm.phone"
              placeholder="请输入电话(可不填)"
          ></el-input>
        </el-form-item>
        <!-- 性别单选框 -->
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="registerForm.gender">
            <el-radio label="male">男</el-radio>
            <el-radio label="female">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 年龄输入框 -->
        <el-form-item label="年龄" prop="age">
          <el-input
              v-model.number="registerForm.age"
              placeholder="请输入年龄(非必填)"
              type="number"
          ></el-input>
        </el-form-item>
        <!-- 爱好输入框 -->
        <el-form-item label="爱好" prop="hobby">
          <el-input
              v-model="registerForm.hobby"
              placeholder="请输入爱好(非必填)"
          ></el-input>
        </el-form-item>
        <!-- 地址输入框 -->
        <el-form-item label="地址" prop="address">
          <el-input
              v-model="registerForm.address"
              placeholder="请输入地址(非必填)"
          ></el-input>
        </el-form-item>
        <!-- 确定按钮和返回按钮 -->
        <el-form-item>
          <el-button type="primary" @click="register">确定</el-button>
          <el-button type="primary" @click="goBack">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { Message } from "element-ui"; // 引入 Message 组件

export default {
  data() {
    return {
      registerForm: {
        username: "",
        password: "",
        phone: "",
        gender: "",
        age: null,
        hobby: "",
        address: "",
      },
      rules: {
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          { min: 6, message: "密码至少需要六位", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    async register() {
      // 表单验证
      this.$refs.registerForm.validate(async (valid) => {
        if (valid) {
          try {
            // 发送注册请求到后端API
            const response = await axios.post("/api/user/register", {
              uname: this.registerForm.username,
              upass: this.registerForm.password,
              phone: this.registerForm.phone,
              gender: this.registerForm.gender,
              age: this.registerForm.age,
              hobby: this.registerForm.hobby,
              address: this.registerForm.address,
            });

            if (response.status === 200) {
              // 注册成功处理
              Message.success("注册成功，请登录");
              await this.$router.push({ path: "/UserLoginView" });
            } else {
              // 注册失败处理
              if (response.status === 409) {
                // 用户名已存在的情况
                this.$refs.registerForm.fields.find((field) => field.prop === 'username').validateState = 'error';
                this.$refs.registerForm.fields.find((field) => field.prop === 'username').validateMessage = '用户名已存在，请更换用户名';
              } else {
                // 其他状态码的处理逻辑
                Message.error("注册失败，该用户已存在");
              }
            }
          } catch (error) {
            // 异常处理
            console.error('Error:', error);
            Message.error("注册失败，该用户已存在");
          }
        }
      });
    },
    goBack() {
      // 返回上一页
      this.$router.push("/UserLoginView");
    },
  },
};
</script>

<style scoped>
.register-page {
  margin-top: -60px;
  background-image: url("@/assets/自习室.png");
  background-size: cover;
  background-position: center;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.register-container {
  width: 400px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.8); /* 调整注册表单容器背景透明度 */
}
</style>
